import React, {PureComponent} from 'react';
import {
  Text,
  Image,
  View,
  TouchableOpacity,
  StyleSheet,
  Dimensions,
} from 'react-native';
import AppConfig from '../../config/appConfig';
import pixelUtil from '../../utils/pixelUtil';
import {TenThousandToStr} from '../../utils/utils';
const {height, width} = Dimensions.get('window');

class RecommendItem extends React.PureComponent {
  _onPress = () => {
    this.props.onPressItem(this.props.item);
  };

  render() {
    let item = this.props.item;
    let imageUri =
      item.goods_thumbnail_url === '' ? item.Pic : item.goods_thumbnail_url;

    if (imageUri.indexOf('http') == -1) {
      imageUri = 'https:' + imageUri;
    }

    return (
      <View style={pixelUtil.stylesContainer}>
        <TouchableOpacity onPress={this._onPress} activeOpacity={0.8}>
          <View style={styles.recommend_item_}>
            <View style={styles.recommend_item}>
              {/*<Text>{this.props.index}</Text>*/}
              {/*缩略图*/}
              <View style={styles.icon_contain}>
                <Image
                  style={styles.icon}
                  source={{
                    uri: imageUri,
                  }}
                />
              </View>

              <View style={styles.text_contain}>
                <View style={styles.text_1}>
                  <Text
                    numberOfLines={2}
                    ellipsizeMode={'tail'}
                    style={styles.text_}>
                    {/*精品*/}
                    <Text style={styles.jinPing}>精品</Text>
                    <Text style={styles.From}>
                      {AppConfig.GetTypeStr(item.TypeFrom)}
                    </Text>
                    {item.Title}
                  </Text>
                </View>

                <View style={styles.text_2}>
                  {/*短title*/}
                  <Text
                    numberOfLines={1}
                    ellipsizeMode={'middle'}
                    style={styles.text_2_contain}>
                    {item.ShortTitle}
                  </Text>
                  <Text style={styles.text_2_sell}>
                    月销:{TenThousandToStr(item.SaleCount)}
                  </Text>
                </View>
                <View style={styles.text_3}>
                  <Text style={styles.juanHou}>
                    卷后价￥
                    <Text style={styles.price}>{item.EndPrice}</Text>
                  </Text>
                  <View style={styles.curPrice}>
                    <Text style={styles.curPriceText}>
                      优惠券￥{item.CouponMoney}
                    </Text>
                  </View>
                </View>
              </View>
            </View>
            {/*下划线*/}
            <View style={styles.whiteLine}>
              <View style={styles._line} />
            </View>
          </View>
        </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  recommend_item_: {
    height: pixelUtil.scale * 225,
    flexDirection: 'column',
  },
  recommend_item: {
    height: pixelUtil.scale * 210,
    flexDirection: 'row',
  },
  icon_contain: {
    height: pixelUtil.scale * 210,
    width: pixelUtil.scale * 210,
    justifyContent: 'center',
    alignItems: 'center',
  },
  icon: {
    height: pixelUtil.scale * 200,
    width: pixelUtil.scale * 200,
    // borderRadius: 20,
    paddingLeft: pixelUtil.scale * 20,
    paddingRight: pixelUtil.scale * 20,
    // resizeMode: "cover"
  },
  text_contain: {
    height: pixelUtil.scale * 180,
    width: width - pixelUtil.scale * 210, //减去图片内容
  },
  text_1: {
    height: pixelUtil.scale * 75,
    width: '100%',
    flexDirection: 'row',
  },
  text_: {
    // title
    overflow: 'hidden',
    color: '#121212',
    width: '100%',
    fontSize: pixelUtil.scale * 27,
  },
  jinPing: {
    height: pixelUtil.scale * 38,
    width: pixelUtil.scale * 225,
    backgroundColor: '#8e13e2',
    borderRadius: 3,
    flexDirection: 'row',
    fontSize: pixelUtil.scale * 24,
    color: '#dddddd',
  },
  From: {
    height: pixelUtil.scale * 38,
    width: pixelUtil.scale * 225,
    backgroundColor: '#e25f00',
    borderRadius: 3,
    flexDirection: 'row',
    fontSize: pixelUtil.scale * 24,
    color: '#dddddd',
  },
  text_2: {
    flex: 1,
    height: pixelUtil.scale * 60,
    width: '100%',
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  text_2_contain: {
    fontSize: pixelUtil.scale * 24,
    color: '#c2c2c2',
    width: pixelUtil.scale * 350,
  },
  text_2_sell: {
    fontSize: pixelUtil.scale * 24,
    color: '#c2c2c2',
    marginRight: pixelUtil.scale * 20,
  },
  text_3: {
    height: pixelUtil.scale * 75,
    width: '100%',
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'flex-end',
  },
  juanHou: {
    fontSize: pixelUtil.scale * 37,
    color: '#e23c03',
  },
  price: {
    fontSize: pixelUtil.scale * 50,
    color: '#e20009',
  },
  curPrice: {
    flexDirection: 'row',
    height: pixelUtil.scale * 60,
    width: pixelUtil.scale * 200,
    borderRadius: pixelUtil.scale * 10,
    borderWidth: pixelUtil.scale * 5,
    borderColor: '#ffc60c',
    borderStyle: 'solid',
    justifyContent: 'center',
    alignItems: 'center',
    marginRight: pixelUtil.scale * 20,
  },
  curPriceText: {
    fontSize: pixelUtil.scale * 24,
    color: '#ffc60c',
  },
  whiteLine: {
    height: pixelUtil.scale * 1150,
    backgroundColor: '#ffffff',
    alignItems: 'center',
  },
  _line: {
    height: pixelUtil.scale * 3,
    backgroundColor: '#e2e2e2',
    width: '100%',
  },
});
export default RecommendItem;
